<blockquote class="layui-elem-quote">添加商品</blockquote>

<!--表单-->
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">父分类</label>
        <div class="layui-input-inline">
               <select name="parentId" lay-filter="parentId">
               </select>
        </div>
        <label class="layui-form-label">子分类</label>
        <div class="layui-input-inline">
            <select name="categoryId">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" required placeholder="请输入商品名" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-inline">
            <textarea name="dscp" class="layui-textarea" placeholder="请输入商品描述" required>

            </textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品售价</label>
        <div class="layui-input-inline">
            <input type="number" name="price" placeholder="请输入商品出售价格" required
            class="layui-input" step="0.01">
        </div>
        <label class="layui-form-label">商品标价</label>
        <div class="layui-input-inline">
            <input type="number" name="markPrice" placeholder="请输入商品标示价格" required
                   class="layui-input" step="0.01">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">颜色</label>
        <div class="layui-input-inline">
            <input type="text" name="color" placeholder="请输入商品颜色"class="layui-input" required>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">版本</label>
        <div class="layui-input-inline">
            <input type="text" name="version" placeholder="请输入商品版本"class="layui-input" required>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-inline">
            <input type="number" name="count" placeholder="请输入商品数量"
            required class="layui-input" step="1">
        </div>
        <label class="layui-form-label">推荐</label>
        <div class="layui-input-inline">
            <input type="radio" name="recom" value="0" title="不推荐" checked>
            <input type="radio" name="recom" value="1" title="推荐">
        </div>
    </div>


    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <!--图片上传的控件-->
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2">多图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                </div>

            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn"
                    lay-submit lay-filter="goods-add">立即提交</button>
        </div>

    </div>

</form>

<script>
    layui.use(['form','upload'],function (){
        var form = layui.form,
            upload = layui.upload,
            $ = layui.$;
            form.render();

        //ajax获取分类信息
        var getParentCategory = function(){
            $.ajax({
                url:'/api/category',
                data:{parentId:0},
                type:'get',
                dataType:'json',
                success:function (result){
                    var html = '<option value="">请选择父分类</option>';

                    //遍历生成下拉列表
                    $.each(result.data,function (index,item){
                       html += '<option value="'+item.id+'">'+item.name+'</option>' ;
                    });

                    $('select[name="parentId"]').html(html);
                    form.render();
               },
                error:function (){
                    layer.msg('请求失败');
                }
            });
        }

        //调用
        getParentCategory();

        //动作 父分类的选择动作
        form.on('select(parentId)',function (data){
            var parentId = data.value;

            //二级联动 子分类根据父
            if(parentId){
                //查父分类下的子分类
                $.ajax({
                   url:'/api/category',
                   data:{parentId:parentId},
                   type: 'get',
                   dataType: 'json',
                   success(result){
                       var html = '<option value="">请选择子分类</option>';
                       $.each(result.data,function (index,item){
                           html +='<option value="'+item.id+'">'+item.name+'</option>';
                       });
                       $('select[name="categoryId"]').html(html);
                       form.render();

                   },
                    error(){
                       layer.msg('请求失败');
                    }
                });
            }else{
                $('select[name="categoryId"]').html('');
                form.render();
            }

        });


        //多图片上传
        upload.render({
            elem: '#test2',
            url: '/api/upload', //此处配置你自己的上传接口即可
            multiple: true,
            before: function(obj){

            },
            done: function(res){
                //上传完毕
                //读取服务器中的图片
                $('#demo2').append('\
                <img style="width: 92px;height: 92px; cursor: pointer" \
                src="/upload/'+res.data+'"\
                data-name="'+res.data+'">\
                ');
            }
        });

        //图片的删除
        $('#demo2').on('click','img',function (){
            $(this).remove();
        });


        //表单提交
        form.on('submit(goods-add)',function (data){
            var pics = [];
            $('#demo2 img').each(function(){   //准备好图片参数
                var url = $(this).attr('data-name');
                pics.push({url: url});
            });
            data.field.pics = pics;
            //注入到服务器

            //ajax
            $.ajax({
                url:'/api/goods',
                data:JSON.stringify(data.field),     //上传JSON格式的数据
                contentType:'application/json; charset=utf-8',
                type:'post',
                dataType:'json',
                success:function (result){
                    if(result.code == 0){
                        //添加成功
                        layer.msg('添加成功');
                        //跳转到列表页面
                        openUrl('/goods/index.html');
                    }else{
                        layer.msg(result.msg);
                    }
                },
                error:function (){
                    layer.msg('请求失败')
                }
            });

            //阻止表单的自动提交
            return false;
        });


    });

</script>